<script setup lang="ts">

import {ref} from "vue";
import {useLoginApi} from "@/services/api";
import type {loginOrRegReq} from "@/interfaces/login";
import {useStore} from "vuex";
import type {UserInfo} from "@/interfaces/user-info";

const store = useStore()
const uToastRef = ref()
const show = ref<boolean>(false)
const data = ref<loginOrRegReq>({
  code:"",
  phoneNumber:""
})
const onLogin = (uToastRef:any) => {
  uToastRef.show({
    type: 'loading',
    message: "登录中",
    complete:()=>{
      uni.login({
        "provider": "weixin",
        "onlyAuthorize": true, // 微信登录仅请求授权认证
        success: async (event)=>{
          const {code} = event
          data.value.code = code
          //客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
          const {data:res}= await useLoginApi(data.value)
          const userInfo:UserInfo = {
            nickName:res.nickName,
            phoneNumber:res.phoneNumber,
            avatar:res.avatar,
            wallet:res.wallet
          }
          await store.dispatch("auth/setUserId",res.id)
          await store.dispatch("auth/setToken",res.token)
          await store.dispatch("auth/setUserInfo",userInfo)
          await uni.navigateBack();
        },
        fail: function (err) {
          // 登录授权失败
          // err.code是错误码
        }
      })
    }
  })

}
const getPhoneNumber = async (e:any)=>{
  console.log(e)
  // useLoginApi()
}
</script>

<template>
  <view class="container">
    <u-toast ref="uToastRef"></u-toast>
    <view class="logo">
      <up-avatar icon="coupon-fill" size="120" font-size="81"></up-avatar>
    </view>
    <view class="login-button">
      <u-button text="立刻登录" color="#e5857b" shape="circle" @click="onLogin(uToastRef)"></u-button>
    </view>
<!--    <u-modal-->
<!--        :show="show"-->
<!--        ref="uModal"-->
<!--        :asyncClose="true"-->
<!--        width="550"-->
<!--        confirmText="允许"-->
<!--        cancelText="拒绝"-->
<!--        :showCancelButton="true"-->
<!--    >-->
<!--      <view class="content">-->
<!--        <view class="icon">-->
<!--          <up-avatar icon="checkbox-mark" size="64" font-size="48" color="#A0E548" bg-color="#ffffff"></up-avatar>-->
<!--        </view>-->
<!--        <view class="msg">-->
<!--          微信授权成功-->
<!--        </view>-->
<!--        <view class="tips">-->
<!--          授权绑定你的手机号-->
<!--        </view>-->

<!--      </view>-->
<!--      <template #confirmButton>-->
<!--        <view class="button">-->
<!--          <u-button text="拒绝" plain @click="show = false"></u-button>-->
<!--          <u-button text="允许" plain color="#E45F2B" @click="show = false" openType="getPhoneNumber" @getphonenumber="getPhoneNumber"></u-button>-->
<!--        </view>-->
<!--      </template>-->
<!--    </u-modal>-->
  </view>
</template>

<style scoped>
.container{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container:before{
  content: "";
  width: 120vw;
  height: 120vw;
  border-radius: 50%;
  background-color: rgb(216, 217, 223);
  position: absolute;
  z-index: -2;
  transform: translateY(-50%);
  right: -10%;
  top: -5%;
}
.container:after{
  content: "";
  width: 100vw;
  height: 100vw;
  border-radius: 50%;
  background-color: rgb(187, 189, 199);
  position: absolute;
  z-index: -1;
  transform: translateY(-50%);
  right: -50%;
  top: -5%;
}
.logo{
  margin-top: 240rpx;
}
.login-button{
  margin-top: 120rpx;
  width: 70%;
}
.content{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx;
}
.icon{
  border: 3px solid #A0E548;
  border-radius: 50%;
}
.msg{
  font-size: 32rpx;
  margin-top: 24rpx;
}
.tips{
  font-size:24rpx;
  margin-top: 24rpx;
}
.button{
  display: flex;
  flex-direction: row;
}
</style>